<template>
  <div class="cart fixed-top">
    <!-- 引入公共头部 -->
    <NavBar title="购物车" back fixed/>
    <!-- 引入公共底部 -->
    <tab-bar/>
    <p :hidden="hidden1"
       :aria-label="c + cAll"></p>
    <div v-if="emtpy">
    <EmptyData text="亲，您的购物车什么都没有哦！"/>
    </div>
  <ul class="cart-ul">
    <li v-for="item in list"  v-bind:key="item.cartId">
      <tr>
        <td class="check-box">
          <van-checkbox v-model="item.chooseStatus" :disabled="item.status === 0"></van-checkbox>
        </td>
        <td width="180%" >
          <div class="cart-card van-card">
            <router-link :to="{path: 'item/detail', query: {goodsId: item.goodsId}}" class="van-card__thumb">
              <img v-lazy="GLOBAL.baseImagePath + item.gdsUrl" class="van-card__img" :label="item.status === 0 ? gdStatus : undefined">
            </router-link>
            <div class="van-card__content">
              <div class="van-card__left">
                <div class="van-card__title">{{item.gdsName}}</div>
                <div class="van-card__desc van-ellipsis">{{ desc + item.property }}</div>
                <div class="van-card__desc van-ellipsis" style="color: red">{{ item.status === 0 ? gdStatus : undefined }}</div>
              </div>
              <div class="van-card__right">
                <div> ￥{{parseFloat(((item.isDiscount === 1 ? (item.discountPrice == null ? 0 : item.discountPrice) : item.salePrice) * memberDiscountPoint).toFixed(2))}}</div>
                <div class="van-card__origin-price"> {{item.isDiscount === 1 ? '￥' + item.salePrice : undefined}}</div>
                <div class="van-card__num">x {{item.num}}</div>
              </div>
            </div>
            <div class="van-card__footer">
              <van-stepper v-model="item.num" integer :min="1" :max="item.stock" :step="1" @change="ckstock(item.num, item.stock, item.propertyId)" class="cart-stepper"/>
              <van-button type="warning" size="small" class="cart-delete" @click="onDelete(item.cartId)">删除</van-button>
            </div>
          </div>
        </td>
      </tr>
    </li>
  </ul>
    <van-submit-bar :disabled="disable"
                    :price="totalPrice * 100"
                    button-text="去结算"
                    @submit="onSubmit">
      <van-checkbox v-model="all"
                    class="checkbox-all" >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import EmptyData from '../../components/common/EmptyData.vue'
import NavBar from '../../components/common/NavBar.vue'
import TabBar from '../../components/common/TabBar.vue'
import orderApi from '../../api/order'
import { Toast } from 'vant'
export default {
  name: 'cart',
  data () {
    return {
      query: {
        num: '',
        propertyId: ''
      },
      emtpy: false,
      memberDiscountPoint: 1,
      isRouterAlive: true,
      gdStatus: '库存不足/已下架',
      temp: true,
      hidden1: true,
      all: false,
      desc: '规格：',
      cDisable: false,
      value: 1,
      list: []
    }
  },
  computed: {
    totalPrice: function () {
      let num = 0
      if (this.list === null) {
        return 0
      }
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].chooseStatus && this.list[i].status === 1) {
          // 是否优惠
          if (this.list[i].isDiscount === 1) {
            num = this.list[i].num * this.list[i].discountPrice * this.memberDiscountPoint + num
          } else {
            num = this.list[i].num * this.list[i].salePrice * this.memberDiscountPoint + num
          }
        }
      }
      return num
    },
    c: function () {
      let _this = this
      if (_this.list === null) {
        return
      }
      for (let i = 0; i < this.list.length; i++) {
        if (!_this.list[i].chooseStatus) {
          _this.all = false
          return this.list[i].chooseStatus
        } else {
          if (_this.list[i].stock < 1) {
            _this.list[i].status = 0
          }
        }
      }
      _this.all = true
      return true
    },
    cAll: function () {
      let _this = this
      if (_this.list === null) {
        return
      }
      for (let i = 0; i < this.list.length; i++) {
        if (!this.list[i].chooseStatus && !this.all) {
          return !this.list[i].chooseStatus
        }
      }
      for (let j = 0; j < this.list.length; j++) {
        _this.list[j].chooseStatus = this.all
      }
      return this.all
    },
    disable: function () {
      if (this.cDisable) {
        return true
      }
      let num = true
      if (this.list === null || this.list === undefined) {
        return true
      }
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].chooseStatus && this.list[i].status === 1) {
          num = false
          break
        }
      }
      return num
    }
  },
  mounted () {
    this.getMemberDiscountPoint()
    this.getCarGoods()
    this.cleanSessionStorage()
  },
  methods: {
    cleanSessionStorage: function () {
      sessionStorage.removeItem('confirmNum')
      sessionStorage.removeItem('goodsList')
      sessionStorage.removeItem('totalPrice')
    },
    getMemberDiscountPoint () {
      let _this = this
      orderApi.getMemberDiscountPoint().then(function (res) {
        if (res.data.status === 0) {
          _this.memberDiscountPoint = res.data.re
        }
      })
    },
    ckstock (unm, stock, propertyId) {
      let _this = this
      orderApi.updateCartGoods(unm, propertyId).then(function (res) {
        if (res.data.status === 0) {
          for (let i = 0; i < _this.list.length; i++) {
            if (_this.list[i].propertyId === propertyId) {
              if (_this.list[i].num >= res.data.re) {
                Toast.fail('库存不足')
              }
              _this.list[i].stock = res.data.re
              break
            }
          }
        }
      })
    },
    getCarGoods () {
      let _this = this
      orderApi.getCartGoods().then(function (res) {
        let templist = res.data.re
        if (templist !== null) {
          for (let i = 0; i < templist.length; i++) {
            templist[i]['chooseStatus'] = false
          }
          _this.list = templist
        } else {
          _this.emtpy = true
          _this.list = null
        }
      })
    },
    onDelete (cid) {
      let _this = this
      orderApi.deleteCartGds(cid).then(function (res) {
        if (res.data.status === 0) {
          for (let i = 0; i < _this.list.length; i++) {
            if (_this.list[i].cartId === cid) {
              _this.list.splice(i, 1)
              if (_this.list === null || _this.list.length === 0) {
                _this.emtpy = true
              }
            }
          }
        } else {
          Toast.fail('删除异常，是程序员的责任，与您的网速和操作无关，别担心是您的手机问题！！')
        }
        // _this.getCarGoods()
      })
    },
    onSubmit () {
      this.cDisable = true
      let _this = this
      let list1 = []
      let listId = []
      for (let i = 0; i < this.list.length; i++) {
        let proper = {
          propertyId: '',
          num: ''
        }
        if (_this.list[i].chooseStatus && _this.list[i].status === 1) {
          proper.goodsId = _this.list[i].goodsId
          proper.propertyId = _this.list[i].propertyId
          proper.num = _this.list[i].num
          listId.push(_this.list[i].cartId)
          list1.push(proper)
        }
      }
      orderApi.checkStock(listId).then(function (res) {
        if (res.data.status === 0) {
          sessionStorage.setItem('goodsList', JSON.stringify(list1))
          sessionStorage.setItem('totalPrice', _this.totalPrice)
          _this.$router.push({path: '/cart/confirm'})
        } else {
          _this.cDisable = false
          Toast.fail(res.data.msg)
        }
      })
    }
  },
  components: {
    NavBar,
    TabBar,
    EmptyData
  }
}
</script>
<style scoped>
  .cart {
    height: 100%;
  }
  .cart-ul {
    padding-bottom: 50px;
  }
  .cart-ul li {
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .check-box {
    vertical-align: middle;
    padding: 5px;
  }
  .van-card {
    background-color: transparent;
  }

  .cart-stepper {
    float: left;
  }

  .cart-delete {
    float: right;
  }

  .checkbox-all {
    padding-left: 5px;
  }

  .van-card {
    padding: 5px 10px 5px 95px;
  }

  .van-card .van-card__title {
    font-weight: 600;
  }
</style>
<style>
  .cart-emtpy {
    font-size: 12px;
    text-align: center;
    line-height: 200px;
  }
  .cart-card .van-card__thumb {
    width: 90px!important;
    height: 90px!important;
    left: 5px;
  }

  .cart-card .van-card__thumb img {
    width: 90%;
  }
  .cart-card .van-card__footer {
    right: 5px;
  }
  .van-ellipsis {
    white-space: unset!important;
  }
</style>
